<script setup>
// 引入 api
import { ref, computed } from "vue"

// 内容
const content = computed(() => {
    const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).+$/
    if (!regex.test(passWord.value)) {
        if (!/^(?=.*[A-Z]).+$/.test(passWord.value)) {
            return "至少包含一个大写字母"
        }
        else if (!/^(?=.*[a-z]).+$/.test(passWord.value)) {
            return "至少包含一个小写字母"
        } else if (!/^(?=.*\d).+$/.test(passWord.value)) {
            return "至少包含一个数字"
        } else {
            return `至少包含一个大写字母、一个小写字母和一个数字`
        }
    }

    return `有效密码`
})

// 用户名
const userName = ref('')

// 密码
const passWord = ref('')

// 点击函数
function btn1() {

}

</script>

<template>
    <!-- 表单 -->
    <form>
        <input type="text" placeholder="用户名" v-model.trim="userName" />
        <br>
        <input type="text" placeholder="密码" v-model.trim="passWord" />
        <!-- 渲染 -->
        {{ content }}
        <br>
        <input type="button" value="提交" @click="btn1" />
    </form>
</template>